<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="uname" label="用户名称"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="department.dname" label="部门"> </el-table-column>
      <el-table-column fixed="right" label="角色">
        <template slot-scope="scope">
          <span v-for="m in scope.row.userole" :key="m.gxid">
            {{ m.role.rname }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="(dialogFormVisible = true), upd(scope.row)"
            >修改密码</el-button
          >
          <el-button type="text" @click="bj(scope.row.uid)">编辑用户</el-button>
          <el-button type="text" @click="del(scope.row.uid)">删除用户</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="index"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="countsize"
      >
      </el-pagination>
    </div>
    <el-dialog title="用户密码修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名:" :label-width="formLabelWidth">
          <el-input v-model="form.uname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码:" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="form.ukey"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="(dialogFormVisible = false), xg()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      index: 1,
      size: 3,
      countsize: 0,
      token: sessionStorage.getItem("token"),
      dialogFormVisible: false,
      form: {
        uid: 0,
        uname: "",
        ukey: "",
      },
      formLabelWidth: "120px",
    };
  },
  mounted() {
    var my = this;
    my.zs();
  },
  methods: {
    upd(mod) {
      var my = this;
      my.form.uid = mod.uid;
      my.form.uname = mod.uname;
      my.form.ukey = mod.ukey;
    },
    xg() {
      var my = this;
      alert(JSON.stringify(my.form));
      this.$axios
        .post("http://localhost:5230/api/item1/Postupd", my.form)
        .then(function (h) {
          if (h.data.h > 0) {
            alert("修改成功");
            my.zs();
          } else {
            alert("修改失败");
          }
        });
    },
    zs() {
      var my = this;
      this.$axios
        .get(
          "http://localhost:5230/api/item1/Getpage?index=" +
            my.index +
            "&size=" +
            my.size
        )
        .then(function (s) {
          my.tableData = s.data.data.modlist;
          my.countsize = s.data.data.countsize;
        });
    },
    bj(uid) {
      this.$router.push("/upduser?uid=" + uid);
    },
    handleSizeChange(val) {
      var my=this;
      my.size=val;
      my.index=1;
      my.zs();
    },
    handleCurrentChange(val) {
      var my=this;
      my.index=val;
      my.zs();
    },
    del(uid){
      var my=this;
      this.$axios.delete(this.$apiurl.apiurl+"Postdeluser?uid="+uid).then(function (h) {
        if (h.data.h>0) {
          my.$message("删除成功");
          my.zs();
        } else {
          my.$message("删除失败");
        }
      })
    }
  },
};
</script>